<template>
    <div>
       <el-row type="flex" justify="center" :gutter="10">
        <el-col :xs="24" :sm="19" :md="15" :lg="8">
            <div class="grid-content bg-purple">
            <h3 class="login_title">欢迎登录 - MMALL管理系统</h3>
            <div class="login_content">
                <el-form :model="registerUser" :rules="rules" ref="registerForm" class="registerForm">
                    <el-form-item prop="username">
                        <el-input type="text" v-model="registerUser.username" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="registerUser.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <!-- 登录-->
                    <el-form-item>
                        <el-button type="primary" class="submit_btn" @click="submitForm('registerForm')">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
            </div>
        </el-col>
        </el-row>
    </div>
</template>

<script>
    import { login } from "../../api/index";
    export default {
        name:"Login",
        data(){
            return {
                registerUser: {
                    username: "",
                    password: ""
                },
                message: {},
                rules: {
                    username: [
                    {
                        required: true,
                        message: "账号不能为空",
                        trigger: "blur"
                    }
                    ],
                    password: [
                    {
                        required: true,
                        message: "密码不能为空",
                        trigger: "blur"
                    },
                    {
                        min: 5,
                        max: 30,
                        message: "长度在6到30个之间",
                        trigger: "blur"
                    }
                    ]
                },
                time: {}
            }
        },
        methods:{
           submitForm(formName){
               this.$refs[formName].validate(valid=>{
                   if (valid) {
                       login(this.registerUser).then(res=>{
                           console.log(res.data);
                           this.message = res.data;
                           this.time = res.data.data;
                           this.login()
                       })
                   }else{
                       console.log("error submit...")
                       return
                   }
               })

           },
           login(){
               if (!this.message.status) {
                   this.$message({
                       message:"恭喜你 登录成功",
                       type: "sucess"
                   })
                    
               } else {
                   this.$message({
                       message:this.message.msg,
                       type: "warning"
                   })
               }
           }

        }
    }
</script>

<style lang="scss" scoped>
@import "@/scss/index.scss";


.login_content {
  width: 95%;
  margin: 0 auto;
  line-height: 50px;
}
.submit_btn {
  width: 100%;
  @include Bg(#337ab7);
  border-color: #2e6da4;
}
.login_title {
  padding: 15px 15px 0;
  font-weight: 500;
  @include Font(16px, #000);
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  @include Bg(#fff);
}
.grid-content {
  border-radius: 4px;
  min-height: 210px;
  padding-bottom: 1%;
}



</style>